<script setup lang="ts">
import { ref } from 'vue'
import { invoke } from '@tauri-apps/api/core'

defineProps<{ msg: string }>()

const count = ref(0)


const openBrowser = async () => {
  try {
    await invoke('open_browser')
    console.log('Browser opened successfully')
  } catch (error) {
    console.error('Failed to open browser:', error)
  }
}

</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">

    <button type="button" @click="count++"> 点击次数 {{ count }}</button>

    <button type="button" @click="openBrowser">
      打开浏览器测试
    </button>

  </div>
  <p>
    编辑
    <code> components/HelloWorld.vue</code> 测试 HMR
  </p>

  <p>
    查看
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite
    starter
  </p>
  <p>
    学习更多关于 Vue IDE 支持的信息，请查看
    <a href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support" target="_blank">Vue Docs Scaling up Guide</a>.
  </p>
  <p class="read-the-docs"> 点击 Vite 和 Vue 图标了解更多信息</p>
</template>

<style scoped>
.card {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.read-the-docs {
  color: #888;
}
</style>
